<!-- home -->
<template>
	<div>
		<div class="warpper">
			<van-sticky :offset-top="0">
				<van-search @click="toSearch" background="#fff" shape="round" placeholder="请输入搜索关键词" />
			</van-sticky>
			<!-- 搜索end -->
			<van-swipe :autoplay="3000" class="my-swipe" style="margin-top: 5px;">
				<van-swipe-item v-for="(image, index) in slideshowList" :key="index">
					<img v-lazy="'https://picsum.photos/200/300' + index" />
				</van-swipe-item>
			</van-swipe>
			<!-- 轮播图end -->
			<div style="background-color: #FFFFFF;margin-top: 5px;">
				<div style="margin-top: 5px;">
					<van-grid :column-num="4" :border="false">
						<template v-for="(item, index) in menus">
							<van-grid-item :key="index">
								<van-image width="50" height="50" :src="'https://picsum.photos/200/300' + index" />
								<span>
									<font size="3" color="">menu</font>
								</span>
							</van-grid-item>
						</template>
					</van-grid>
				</div>
			</div>
			<!-- 宫格end -->

			<div class="block scroll">
				<div class="title">
					精品推荐
				</div>

				<div class="grid">
					<div @click="toDetail(item.id)" class="grid-item" v-for="(item, index) in recommend" :key="index">
						<img :src="'https://picsum.photos/200/300?' + index" alt="">
						<div class="title">
							Title
						</div>
						<div class="row">
							<div class="price">¥12</div>
							<div class="disprice">¥18</div>
						</div>
					</div>
				</div>
			</div>


			<div class="block scroll">
				<div class="title">
					猜你喜欢
				</div>

				<div class="list">
					<div @click="toDetail(item.id)" class="list-item" v-for="(item, index) in recommend" :key="index">
						<img :src="'https://picsum.photos/200/300?' + index" alt="">
						<div class="column">
							<div>
								<div class="title">
									Title
								</div>
								<div class="subtitle">
									subTitle
								</div>
							</div>
							<div class="row">
								<div class="price">¥12</div>
								<div class="disprice">¥18</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	getMenus,
	getBanner
} from "@/api/home.js"
export default {
	data() {
		return {
			imgUrls: this.$baseApi,
			menus: new Array(4),
			slideshowList: new Array(4),
			recommend: new Array(12).fill({
				id: 123
			})
		};
	},
	created() {
		this.getData();
	},
	methods: {
		getData() {
			getMenus().then(res => {
				this.menus = res.data
			})
			getBanner().then(res => {
				this.slideshowList = res.data
			})
		},
		toSearch(){
			this.$router.push('/search')
		},
		toDetail(id){
			this.$router.push('/detail/'+id)
		}
	},
};
</script>
<style lang="scss" scoped>
.warpper {
	background-color: #F8F8F8;
	padding: 5px;
}

.my-swipe .van-swipe-item img {
	width: 100%;
	height: 200px;
}

.my-swipe {
	margin-top: 5px;
	margin-bottom: 7px;
	height: 180px;
}

// 滚动条
.item {
	margin: 5px;
	width: 31.3%;
	white-space: nowrap;
	display: inline-block;
}

.scroll {
	padding: 5px;
	margin-top: 8px;
	background-color: #fff;
	text-align: center;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
}

::-webkit-scrollbar {
	display: none;
}

.block {
	display: flex;
	flex-direction: column;
	align-items: center;

	>.title {
		width: 100%;
		text-align: left;
		font-size: 16px;
		margin-bottom: 20px;
	}

	.list {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 15px;
		padding: 0 20px;
		box-sizing: border-box;
		margin-bottom: 50px;

		.list-item {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			gap: 10px;

			.column {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.row {
				display: flex;
			}

			.title,
			.subtitle {
				text-align: left;
			}

			img {
				height: 100px;
			}
		}
	}

	.price {
		color: chocolate;
		font-size: 16px;
		font-weight: bold;
	}

	.disprice {
		font-size: 14px;
		text-decoration: line-through;
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 5px;

		.grid-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 5px;
			gap: 3px;

			.row {
				display: flex;
			}



			>img {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
